<template>
  <div>
    <el-table
      :data="userList"
      style="width: 100%"
    >
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="realname"
        label="真实姓名"
        width="180"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[15, 30, 60, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import { mapActions,mapState } from 'vuex'

  export default {
    name: "Index",
    methods:{
      ...mapActions('user',['getUserListAction']),
      handleCurrentChange(val){
        this.getUserListAction({
          username:this.username,
          realname:this.realname,
          pageNum:val,
          pageSize:this.pageSize
        })
      },
      handleSizeChange(val){
        this.getUserListAction({
          username:this.username,
          realname:this.realname,
          pageNum:this.pageNum,
          pageSize:val
        })
      }
    },
    created(){
      this.getUserListAction({
          username:this.username,
          realname:this.realname,
          pageNum:this.pageNum,
          pageSize:this.pageSize
        })
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        username:'',
        realname:''
      }
    },
    computed:{
      ...mapState('user',['userList','pageNum','pageSize','total'])
    }
  }
</script>

<style lang="stylus" scoped>
  .pagination
    text-align center
    margin-top 20px
</style>